<template>
  <div class="audition16">
    <p>基本属性：</p>
    <p><br></p>
    <p>1. store: 单一状态树，作为唯一数据源而存在。单一状态树让我们能够直接地定位任一特定的状态片段。</p>
    <p>store通过createStore创建，createStore接收一个对象作为参数，该对象有state、getter、mutations、action等属性</p>
    <p><br></p>
    <p>2. mutations: 是一个对象。它包含一个个mutation。<br/>每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。<br/>这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。<br/>更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。</p>
    <p>要使用一个mutation，需要使用commit方法唤醒：</p>
    <code class="code">
      store.commit('increment')
    </code>
    <p> mutation 必须是同步函数</p>
    <p><br></p>
    <p>3. actions: 也是一个对象。它包含一个个action。</p>
    <p>action 类似于 mutation，不同在于:</p>
    <p>action 提交的是 mutation，而不是直接变更状态。action可以是同步，也可以是异步。</p>
    <p>action 函数接受一个与 store 实例具有相同方法和属性的 context 对象</p>
    <p>通过store.dispatch(actionType)的方法触发某个action</p>
    <p><br></p>
    <p>4. modules: 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。</p>
    <p>为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。<br/>每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割</p>
    <code class="code">
      const <span class="color">moduleA</span> = {<br/>
        <span class="indient">state: () => ({...}),</span><br/>
        <span class="indient">mutations: {...},</span><br/>
        <span class="indient">actions: {...},</span><br/>
        <span class="indient">getters: {...}</span><br/>
      }<br/>
      const <span class="color1">moduleB</span> = {<br/>
        <span class="indient">state: () => ({...}),</span><br/>
        <span class="indient">mutations: {...},</span><br/>
        <span class="indient">actions: {...},</span><br/>
        <span class="indient">getters: {...}</span><br/>
      }<br/>
      <br/>
      const <span class="color3">state</span> = <span class="color2">createStore</span>({<br/>
        <span class="indient">modules: {</span><br/>
          <span class="indient2">moduleA,</span><br/>
          <span class="indient2">moduleB</span><br/>
        <span class="indient">}</span><br/>
      })<br/>
      <br/>
      // 获取moduleA<br/>
      store.state.moduleA<br/>
      // 获取moduleB<br/>
      store.state.moduleB
    </code>
    <p><br></p>
    <p>mutation为啥必须是同步函数？</p>
    <p><br></p>
    <p>
      如果mutation使用异步函数，当 mutation 触发的时候<br/>回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何<br/>在回调函数中进行的状态的改变都是不可追踪的。给调试带来很大困难。
    </p>
    <p>推荐阅读：<a href="https://vuex.vuejs.org/zh/guide/mutations.html#mutation-%E5%BF%85%E9%A1%BB%E6%98%AF%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0" target="_blank">vuex官方文档</a></p>
  </div>
</template>

<script>
export default {
  name: 'Audition16'
}
</script>

<style>

</style>